<!-- 查看猫咪 -->
<template>
	<view class="container">
		<view class="MainBox">

			<cu-custom bgColor="bg-gradual-them" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">{{pageName}}</block>
			</cu-custom>

			<!-- 反转排序-黏性按钮 -->
			<view class="stickiness-reverse-label" @click="reverseList">
				<view class="button-back-icon tn-icon-tag-fill">
				</view>
				<view class="button-back">
					反转排序
				</view>
			</view>

			<!-- 返回顶部-黏性按钮 -->
			<view class="back-to-top" v-show="scrollTop > 300" @click="scrollToTop">
				<view class="button-back-icon tn-icon-up-fill">
				</view>
				<view class="button-back">
					回到顶部
				</view>
			</view>


			<!-- 顶部 tabs标签选项 -->
			<view style="margin: auto;">
				<scroll-view scroll-x class="bg-white nav" enable-flex style="justify-content: space-around;"
					scroll-with-animation :scroll-left="scrollLeft">

					<view>

						<view class="cu-item"
							style="justify-content: space-around !important; width: 22%;text-align: center;"
							:class="index == TabCur?'text-them cur':''" v-for="(item,index) in navTop" :key="index"
							@tap="tabSelect" :data-id="index">
							<!-- 全部 -->
							<view :class="0 === TabCur ? 'tn-icon-honor-fill':''" class="tn-icon-honor"
								v-if="index === 0">{{' '}} {{item.title}}</view>
							<!-- 在读 -->
							<view :class="1 === TabCur ? 'tn-icon-vip-fill':''" class="tn-icon-vip" v-if="index === 1">
								{{' '}} {{item.title}}
							</view>
							<!-- 毕业 -->
							<view :class="2 === TabCur ? 'tn-icon-success-square-fill':''"
								class="tn-icon-success-square" v-if="index === 2">{{' '}} {{item.title}}</view>
							<!-- 其他 -->
							<view :class="3 === TabCur ? 'tn-icon-discover-planet-fill':''"
								class="tn-icon-discover-planet" v-if="index === 3">{{' '}} {{item.title}}</view>

						</view>
					</view>
				</scroll-view>
			</view>


			<view v-for="(item, id) in recentyList" :key="id" v-show="TabCur === 0 ? true 
		: TabCur === 1 && item.catSituation == '在读' ? true
		: TabCur === 2 && item.catSituation == '毕业' ? true
		: TabCur === 3 && (item.catSituation == '喵星' || item.catSituation == '休学') ? true : false">
				<view class="cu-list menu-avatar" @click="goCatMessage(item.id)">

					<view class="cat-menu">

						<view class="cat-flex1">
							<view class="cat-flex2">

								<!-- 猫猫序号 -->
								<view class="rankIndex">
									<text>{{item.sequence}}</text>
								</view>

								<!-- 猫咪头像 -->
								<view class="cu-avatar round lg">
									<image class="cat-head" :src="item.catImg" mode="aspectFill">
									</image>
								</view>

								<!-- 猫咪昵称 -->
								<view style="margin-left: 20rpx;">
									<view class="text-cut ">{{item.catName}}</view>
								</view>

							</view>


							<!-- 猫咪类型 -->
							<view class="cu-tag radius " style="margin-right: 20rpx;" :class="item.catSituation === '在读' ? 'bg-gradual-blue' 
							: item.catSituation === '毕业' ? 'bg-gradual-green' 
							: item.catSituation === '休学' ? 'bg-gradual-purple' 
							: item.catSituation === '喵星' ? 'bg-gradual-gray' : 'bg-gradual-gray'">
								<view>{{item.catSituation}}</view>
							</view>
						</view>

					</view>
				</view>

			</view>

			<view style="height: 140rpx;width: 1rpx;"></view>

			<u-toast ref="uToast" />

		</view>
	</view>



	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				scrollTop: 0, // 滚动高度

				pageName: '猫咪图鉴',

				// 猫猫信息
				modalName: null,
				skin: false,
				listTouchStart: 0,
				listTouchStartY: 0,
				listTouchDirection: null,
				isLoad: true,
				recentyList: [],
				// 查看类型
				viewId: '',

				TabCur: 0,
				scrollLeft: 0,

				//顶部
				navTop: [{
						id: 1,
						title: '全部'
					},
					{
						id: 2,
						title: '在读'
					},
					{
						id: 3,
						title: '毕业'
					},
					{
						id: 4,
						title: '其他'
					},
				],

				current: 0,

			}
		},
		onLoad(option) {
			if (option.id == 0) {
				this.viewId = '所有'; // 获取查看类型
			} else if (option.id == 1) {
				this.viewId = '三花和玳瑁'; // 获取查看类型
			} else if (option.id == 2) {
				this.viewId = '橘猫和橘白';
				bg - gradual - green // 获取查看类型
			} else if (option.id == 3) {
				this.viewId = '奶牛'; // 获取查看类型
			} else if (option.id == 4) {
				this.viewId = '狸花'; // 获取查看类型
			} else if (option.id == 5) {
				this.viewId = '纯色'; // 获取查看类型
			}

			console.log(this.viewId);


			this.getmessageData() // 获取猫咪资料

		},
		onReachTop() {
			this.scrollTop = 0; // 监听滚动到顶部事件，重置滚动高度为0
		},
		onPageScroll(event) {
			this.scrollTop = event.scrollTop; // 监听页面滚动事件，实时更新滚动高度
		},

		methods: {
			// 反转列表
			reverseList() {
				  if (!Array.isArray(this.recentyList)) {
				    console.error('recentyList is not an array!');
				    return;
				  }
				  this.recentyList = this.recentyList.reverse();
			},

			// 回到顶部
			scrollToTop() {
				uni.pageScrollTo({ // 使用uni-app提供的pageScrollTo方法实现平滑滚动回到顶部
					scrollTop: 0,
					duration: 300,
				});
			},


			// 全屏分页
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log('this.TabCur', this.TabCur)
			},


			// 获取 猫咪资料
			getmessageData() {


				// this.request('loadCatInfo', 'GET').then(res=>{
				this.$u.api.loadCatInfo({}).then(res => {
					try {

						// console.log("res:",res)
						// 如果成功：
						if (res.code == 200) {
							let catMsg = {}
							let flag = 0 // 判断是否有猫咪图鉴的 标志  【如果没有就弹窗】

							// 如果是所有，则不需要判断
							if (this.viewId == '所有') {
								for (var i = 0; i < res.data.length; i++) {

									catMsg[i] = {};
									catMsg[i]['sequence'] = i + 1; // 序号
									catMsg[i]['catType'] = res.data[i].catType; // 猫咪类型       【根据这个进行分类】
									catMsg[i]['id'] = res.data[i].id; // 猫咪编号       【后面的跳转  根据这个进行分类     ❤❤】
									catMsg[i]['catImg'] = this.myimgurl() + res.data[i].catImg; // 猫咪照片
									catMsg[i]['catName'] = res.data[i].catName; // 猫咪昵称
									catMsg[i]['catSituation'] = res.data[i].catSituation; // 情况 在读、毕业

								}
								flag = 1

							}
							// 如果不是，则需要判断
							else {
								for (var i = 0; i < res.data.length; i++) {
									// 这里进行类型判断
									if (this.viewId == res.data[i].catType) {



										catMsg[i] = {};

										catMsg[i]['sequence'] = i + 1; // 序号

										catMsg[i]['catType'] = res.data[i].catType; // 猫咪类型       【根据这个进行分类】

										catMsg[i]['id'] = res.data[i].id; // 猫咪编号       【后面的跳转  根据这个进行分类     ❤❤】


										catMsg[i]['catImg'] = this.myimgurl() + res.data[i].catImg; // 猫咪照片
										catMsg[i]['catName'] = res.data[i].catName; // 猫咪昵称

										catMsg[i]['catSituation'] = res.data[i].catSituation; // 情况 在读、毕业

										flag = 1
									}
								}


							}
							this.recentyList = Object.values(catMsg).reverse();

							if (flag == 0) {
								this.$refs.uToast.show({
									title: '该类还没有任何图鉴哟 期待您的上传！',
									type: 'primary',
									url: ''
								})
							}

							// console.log('catMsg[0].id:',catMsg.catImg)
							// if(catMsg[0].id){}
							//如果为空 【就说明还没有该类还没有猫咪，等待你的上传哟！】

							// console.log("recentyList:",this.recentyList)

						}

					} catch (e) {
						//TODO handle the exception
						console.log("e:", e)

						this.$refs.uToast.show({
							title: '该类还没有任何图鉴哟 期待您的上传！',
							type: 'primary',
							url: ''
						})
					}
				})


			},

			// 向下一级跳转【查看猫咪详细信息】
			goCatMessage(id) {
				uni.navigateTo({
					url: './message?id=' + id,
				});
			}
		}
	}
</script>
<style>
	/* page不能写带scope的style标签中，否则无效 */
	page {
		background: linear-gradient(-120deg, #ebfbff, #ebfbff);

	}
</style>

<style lang="scss" scoped>
	.rankIndex {
		width: 80rpx;
		height: 140rpx;
		line-height: 140rpx;
		text-align: center;
		color: #CCCCCC;
		font-size: 40rpx;
	}

	/* 内容布局 start*/
	.cat-menu {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 1);
		width: 85%;
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 15rpx !important;
		margin: auto;
		margin-top: 35rpx;
	}

	.cat-flex1 {

		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;


	}

	.cat-flex2 {
		display: flex;
		justify-content: space-around;
		align-items: center;

	}


	.cat-head {
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
	}

	.MainBox {
		width: 750rpx;

		video {
			width: 750rpx;
		}
	}

	.cssBox {
		padding: 20rpx 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 15rpx;
	}

	.rightBox {
		width: 150rpx;
		height: 100%;
		position: absolute;
		right: 20rpx;
		top: 0;
		text-align: center;
		line-height: 120rpx;
		padding: 0;
		background: none;
	}

	.list_title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.list_content {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		word-break: break-all;
		font-size: 28rpx;
		color: #888;
	}

	.courseBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: -10px;

		view {
			width: 240rpx;
			height: 58rpx;
			border: 2rpx solid #909399;
			text-align: center;
			line-height: 58rpx;
			-webkit-border-radius: 6px;
			border-radius: 12rpx;
			margin: 10rpx 0 20rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			word-break: break-all;
			font-size: 24rpx;
			color: #909399;
			padding: 0 6rpx;
		}

		.active {
			border: 2rpx solid #2979ff;
			background-color: #2979ff;
			color: #FFFFFF;
		}
	}

	.courseBox::after {
		content: "";
		flex: auto;
	}

	.courseBox>view {
		margin-left: 10px;
		margin-bottom: 10px;
		width: -webkit-calc((100% - 10px*3)/ 3);
		width: calc((100% - 10px*3)/ 3);
	}

	button::after {
		border: none;
		padding: 0;
	}

	// 黏性顶部标签
	.button-back-icon {
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		color: #fff;
		font-size: 28rpx;
		height: 30%;
		padding: 0;
	}

	.button-back {

		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		color: #fff;
		font-size: 28rpx;
		height: 70%;
	}

	.back-to-top {
		position: fixed;
		right: 0rpx;
		bottom: 150rpx;

		padding: 15rpx 20rpx;
		background: linear-gradient(-120deg, #00ebeb, #4782df);

		color: #fff;
		border-radius: 20rpx 0 0 20rpx;

		font-size: 28rpx;
		line-height: 1;
		z-index: 9999;

		height: 170rpx;
		width: 50rpx;

	}

	.stickiness-reverse-label {
		position: fixed;
		right: 0rpx;
		bottom: 400rpx;

		padding: 15rpx 20rpx;
		background: linear-gradient(-120deg, #5ce115, #52c812);

		color: #fff;
		border-radius: 20rpx 0 0 20rpx;

		font-size: 28rpx;
		line-height: 1;
		z-index: 9999;

		height: 170rpx;
		width: 50rpx;
	}
</style>
